<template>
  <el-dialog
    v-model="props.showExcelOut"
    title="导出Excel数据"
    width="30%"
    draggable
    :before-close="handleClose"
  >
    <el-form-item label="请填写表名称">
      <el-input v-model="tableName"></el-input>
    </el-form-item>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { formateJson } from './utils'
const props = defineProps({
  showExcelOut: {
    type: Boolean,
    required: true,
  },
  rolelistAll: {
    type: Array,
    defult: [],
  },
  excleConfig: {
    type: Object,
    defult: {},
  },
})
const emit = defineEmits(['cancel', 'confirm', 'onSucess'])

const tableName = ref('')
const loading = ref(false)
const cancel = () => {
  tableName.value = ''
  emit('cancel')
}
const confirm = async () => {
  if (tableName.value == '') {
    ElMessage({
      message: '表名不能为空！',
      type: 'warning',
    })
  } else {
    const excel = await import('./Export2Excel')
    // 数据转格式化 变成二维数组形式
    const data = formateJson(props.excleConfig, props.rolelistAll)
    // 生成excel 固定写法
    excel.export_json_to_excel({
      header: Object.keys(props.excleConfig),
      data,
      filename: tableName.value,
    })
    tableName.value = ''
    emit('cancel')
  }
}
const handleClose = () => {
  tableName.value = ''
  emit('cancel')
}
</script>
<style lang='less' scoped>
</style>